<template>
	<view>

		<u-sticky>

			<!-- 标签控件 -->
			<view class="tab-swiper">
				<u-tabs-swiper activeColor="#1573FF" ref="tabs" :list="list" :current="current" @change="tabChange"
					:is-scroll="false"></u-tabs-swiper>
			</view>

		</u-sticky>

		<mescroll-body ref="mescrollRef222" @init="mescrollInit" @down="downCallback" @up="upCallback">

			<view class="item" @click="goDetail(item)" v-for="(item, index) in listdata" :key="index">

					<text class="title">
						强制收车信息
					</text>
				
					<u-line color="#efefef" :customStyle="{'margin-bottom': '30rpx','display': 'block',}"></u-line>
				
					<view class="text-line">
						<text class="text-name">车牌号:</text>
						<text class="text-value">{{item.carNo|filterNull}}</text>
					</view>
				
					<view class="text-line">
						<text class="text-name">品牌/车系/车型:</text>
						<text class="text-value">{{item.carModelName|filterNull}}</text>
					</view>
				
					<view class="text-line">
						<text class="text-name">收车原因:</text>
						<text class="text-value">{{item.collectReason|filterNull}}</text>
					</view>
				
					<view class="text-line">
						<text class="text-name">客户名称:</text>
						<text class="text-value">{{item.checkerName|filterNull}}</text>
					</view>
				
					<view class="text-line">
						<text class="text-name">收车时间:</text>
						<text class="text-value">{{item.collectCarTime|filterNull}}</text>
					</view>
				
				
					<view style="display: inline-flex; justify-content: flex-end;">
						<view class="btn-detail">
							详 情
						</view>
					</view>
				
				

			</view>
		</mescroll-body>
		
		<view class="add-btn" v-if="showadd" @click="goAdd">+</view>

	</view>
</template>

<script>
	import lrNavigationBar from "../../components/global/lr-navigation-bar.vue"
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				list: [{
						name: '全部',
						// num: 0
						// count: 1
					},
					{
						name: '待收车',
						// count: 12345
						// num: 0
					},
					{
						name: '已收车',
						// count: 12345
						// num: 0
					},
				],
				current: 0,
				pageNo: 1,
				listdata: [],
				carId: '',
				pageType: '',
				showadd:false,
			}
		},
		components: {
			lrNavigationBar
		},
		onLoad(op) {
			this.carId = op.carId
			this.pageType = op.pageType
		},
		onShow() {
			this.getCountData();

			this.getListData();
			
			this.getShowBtn();
		},

		methods: {
			//切换标签
			tabChange(index) {
				console.log('标签切换了', index);
				this.current = index;

				this.pageNo = 1;
				this.getListData();
			},

			getCountData() {
				this.$u.api.getCollectListCount({
					carId: this.carId
				}).then(res => {
					this.list[0].name = '全部'+res.carCollectCount;
					this.list[1].name = '待收车'+res.dcarCollectCount;
					this.list[2].name = '已收车'+res.ycarCollectCount;
				})
			},

			getListData() {

				this.$u.api.getCollectRecordList({
					collectType: this.current,
					pageNo: this.pageNo,
					carId: this.carId
				}).then(res => {
					console.log('停止刷新');
					if (this.pageNo == 1) {

            this.listdata = [];
          }
          this.listdata = this.listdata.concat(res);
          this.mescroll.endSuccess(res.length);
        }).catch(() => {
					this.mescroll.endErr();
				})
			},
			
			getShowBtn(){
				this.$u.api.validateCollect(this.carId).then(res => {
					this.showadd = true;
				}).catch(() => {
					this.showadd = false;
				})
			},

			upCallback(page) {
				console.log("触发了上拉加载" + page);

				this.pageNo = page.num;
				this.getListData();
			},

			goDetail(item) {
				uni.navigateTo({
					url: '/pagesA/collect-car/collect-detail?businessId=' + item.carCollectId+'&pageType=fromcar'
				})
			},
			
			goAdd(){
				uni.navigateTo({
					url: '/pagesA/collect-car/collect-add?carId=' + this.carId+'&pageType=add'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.tags {
		margin-top: 15rpx;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;

		.tag {
			color: #fff;
			font-size: 24rpx;
			padding: 3rpx 15rpx;
			margin-right: 10upx;
			background-color: #1573FF;
			border-radius: 5rpx;
		}

		.tag:nth-child(even) {
			background: #f17559;
		}
	}

	.state {
		position: absolute;
		top: 20rpx;
		left: 0;
		color: #fff;
		z-index: 9;
		padding: 3rpx 10rpx;
		text-align: center;
		border-radius: 0 90rpx 90rpx 0;
		font-size: 24rpx;
		white-space: nowrap;
	}

	.html-content {
		font-size: 24rpx;
		color: #A7A7A7;
		margin: 0 20rpx 8rpx;

		overflow: hidden;
		word-break: break-all;
		/* break-all(允许在单词内换行。) */
		text-overflow: ellipsis;
		/* 超出部分省略号 */
		display: -webkit-box;
		/** 对象作为伸缩盒子模型显示 **/
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1; //两行
	}
	
	.add-btn{
		font-size: 38rpx;
		color: #333;
		background-color: #fff;
		box-shadow: 5rpx 5rpx 10rpx #a6a6a6;
		width: 100rpx;
		height: 100rpx;
		border-radius: 90rpx;
		position: fixed;
		bottom: 80rpx;
		right: 60rpx;
		text-align: center;
		line-height: 100rpx;
		
	}
	
	.title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: $black33;
		margin-left: 20rpx;
	}
	
	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $blue15;
		font-size: 26rpx;
		line-height: 60rpx;
		margin: 10rpx 20rpx 10rpx;
		align-self: flex-end;
	}
</style>
